<template>
    <div class="detail">
        <div class="detail-tips-li" v-for="ele in tips">
            <i class="detail-icon el-icon-warning"></i>
            <div>警告：</div>
            <div class="detail-title">报告单编号{{ele['reportCode']}}中，有任务单{{ele['code']}}，视频{{ele['status']}}</div>
        </div>
        <div class="detail-btnlist">
            <el-button size="small" @click.native.prevent="onCancel">取消</el-button>
            <el-button size="small" type="primary" @click.native.prevent="onConfirm">确认</el-button>
        </div>
    </div>
</template>

<script>

export default {
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data(tips) {
            console.log(tips)
            // this.tips = tips
            // 测试模拟
            this.tips = [{
                reportCode: 'F00310211230253',
                code: 'gl-343434',
                status: '未上传'
            },{
                reportCode: 'F00310211230253',
                code: 'gl-343434',
                status: '未上传'
            },{
                reportCode: 'F00310211230253',
                code: 'gl-343434',
                status: '未上传'
            },{
                reportCode: 'F00310211230253',
                code: 'gl-343434',
                status: '未上传'
            }]
        }
    },
    data() {
        return {
            tips: []
        }
    },
    methods: {
        onCancel() {
            this.$currentDialog.close()
            console.log(this.$currentDialog)
        },
        onConfirm() {
            this.$currentDialog.confirmd()
        }
    },
}
</script>

<style lang="scss" scoped>
.detail {
    padding-left: 40px;
    padding-right: 40px;
    @extend %clearfix;
    &-picture {
        display: inline-block;
        width: 250px;
        height: 250px;
    }
    &-btnlist {
        float: right;
        margin-top: 44px;
    }
    &-tips-li {
        float: left;
        display: flex;
        align-items: center;
        color: #e6a23c;
        font-size: 16px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    &-title {
        margin-left: 8px;
        margin-right: 8px;
    }
    &-icon {
        font-size: 26px;
        margin-left: 4px;
        margin-right: 4px;
    }
}
</style>
